<template>
  <el-dialog v-model="dialog.visible" title="用户服务协议" width="45%">
    <div class="w-full max-w-full overflow-x-auto h-[600px]">
      <VuePdfEmbed annotation-layer text-layer source="/agreement/serviceAgreement.pdf" />
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
        <el-button @click="handleCloseDialog">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import "vue-pdf-embed/dist/styles/annotationLayer.css";
import "vue-pdf-embed/dist/styles/textLayer.css";
import VuePdfEmbed from "vue-pdf-embed";
const emit = defineEmits(["update:modelValue", "confirm", "cancel"]);
const dialog = reactive({
  title: "",
  visible: false,
});

async function handleSubmit() {
  emit("confirm");
  dialog.visible = false;
  emit("update:modelValue", false); // 关闭弹窗
}
// 关闭弹窗
function handleCloseDialog() {
  dialog.visible = false;
  emit("cancel");
  emit("update:modelValue", false); // 关闭弹窗
}
function showModal(val) {
  dialog.visible = true;
}

defineExpose({
  showModal,
});
</script>
<style style="scss" scoped></style>
